; (function () {
    "use strict"
    //左上角有货更多
    const omore = document.querySelector(".more");
    const omoreMine = document.querySelector(".more-min");
    const aa = document.querySelectorAll(".more-min li a");
    omore.onmouseover = function () {
        omoreMine.style.display = "block";
        omoreMine.onmouseout = function () {
            omoreMine.style.display = "none";
        }
        omore.onmouseout = function () {
            omoreMine.style.display = "none";
        }
    }
    let aminz = ["集团官网", "男生潮流", "女生潮流", "新鲜好去处", "潮流嘉年华"];
    let aminy = ["YOHO!", "YOHO!BOYS", "YOHO!GIRLS", "Mars", "YO'HOOD"]
    for (let i = 0; i < aa.length; i++) {
        aa[i].index = i
        aa[i].onmouseover = function () {
            this.innerHTML = aminz[this.index];
            this.style.fontSize = "16px";
        }
        aa[i].onmouseout = function () {
            this.innerHTML = aminy[this.index];
            this.style.fontSize = "14px";
        }
    }
    //==============================
    //导航二级菜单
    let oFs = document.querySelector(".Fs")
    let ofs = document.querySelector(".fs")
    oFs.onmouseover = function () {
        ofs.style.display = "block";
        ofs.onmouseout = function () {
            ofs.style.display = "none";
        }
        oFs.onmouseout = function () {
            ofs.style.display = "none";
        }
    }
    let oXl = document.querySelector(".Xl")
    let oxl = document.querySelector(".xl")
    oXl.onmouseover = function () {
        oxl.style.display = "block";
        oxl.onmouseout = function () {
            oxl.style.display = "none";
        }
        oXl.onmouseout = function () {
            oxl.style.display = "none";
        }
    }
    let oBd = document.querySelector(".Bd")
    let obd = document.querySelector(".bd")
    oBd.onmouseover = function () {
        obd.style.display = "block";
        obd.onmouseout = function () {
            obd.style.display = "none";
        }
        oBd.onmouseout = function () {
            obd.style.display = "none";
        }
    }
    let oPs = document.querySelector(".Ps")
    let ops = document.querySelector(".ps")
    oPs.onmouseover = function () {
        ops.style.display = "block";
        ops.onmouseout = function () {
            ops.style.display = "none";
        }
        oPs.onmouseout = function () {
            ops.style.display = "none";
        }
    }
    //=============================
    //商品详情渲染
    class Sp {
        constructor() {
            this.details1 = document.querySelector(".details1")
            this.url = "http://localhost:3000/data/pag1goods.json";
            this.id = location.href.split("?").slice(1)[0];
            this.load()
        }
        //ajax
        load() {
            ajax({
                url: this.url,
                success: (res) => {
                    this.res = JSON.parse(res);
                    this.render()
                }
            })
        }
        // xuanran
        render() {
            let str = ""
            for (let i = 0; i < this.res.length; i++) {
                if (this.id === this.res[i].id) {
                    str += `
                    <ul class="top">
                <li>首页 ></li>
                <li>上衣 ></li>
                <li>T恤 ></li>
                <li>${this.res[i].title}</li>
                </ul>
                    <div class="detailsc">
                    <div class="detailsc-l">
                        <div class="imgbox">
                            <img src="${this.res[i].img1} " alt="">
                            <span></span>
                        </div>
                        <div class="imgtbox">
                            <img src="${this.res[i].img1}" alt="" class="imgstyle">
                            <img src="${this.res[i].img2}" alt="">
                        </div>
                    </div>
                    <div class="imgbbox">
                        <img src="${this.res[i].img1}" alt="">
                    </div>
                    <div class="detailsc-r">
                        <div class="rt">
                            <h1>${this.res[i].title}</h1>
                        </div>
                        <p class="rm">
                            <span class="rmt">
                                <span class="min">吊牌价:</span>&nbsp;&nbsp;&nbsp;<span>${this.res[i].primary}</span>
                            </span>
                            <br>
                            <span class="rmb">
                                <span class="min">促销价:</span><span>&nbsp;&nbsp;${this.res[i].xmoney}</span>&nbsp;&nbsp;
                                <span>${this.res[i].fracture}</span>&nbsp;&nbsp;<span>您当前是普通会员，成为VIP享受更多优惠！</span>
                            </span>
                        </p>
                        <div class="rb">
                            <span>促&nbsp;&nbsp;销:</span>
                            <ul class="rb-r">
                                <li><span class="rb-rs">赠品</span><span class="rb-rb">满199赠好礼，赠完即止</span></li>
                                <li><span class="rb-rs">赠品</span><span class="rb-rb">满99赠好礼，赠完即止</span></li>
                                <li><span class="rb-rs">赠品</span><span class="rb-rb">下单赠好礼，赠完即止</span></li>
                            </ul>
                        </div>
                        <div class="rf">
                            <ul class="rft">
                                <li><span class="rft-m">颜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色 :</span>
                                    <div class="rtl1">
                                        <img src="${this.res[i].img1}" alt="">
                                        <span>${this.res[i].color}</span>
                                    </div>
                                </li>
                                <li><span class="rft-m">尺&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码 :</span>
                                    <div class="rtl2">
                                        <span>S</span>
                                        <span>M</span>
                                        <span>L</span>
                                    </div>
                                </li>
                                <li><span class="rft-m">数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量 :</span>
                                    <div class="rtl3">
                                        <span class="rftm">-</span>
                                        <span>1</span>
                                        <span class="rftm">+</span>
                                    </div>
                                </li>
                            </ul>
                            <div class="srb">
                                <div class="join">
                                    <span><i class="iconfont icon-gouwuchekong"></i>加入购物车</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`
                }
            }
            //  到页面
            this.details1.innerHTML = str;
            //放大镜
            this.addEvent()
            //图片切换
            this.imgSwitching()
        }
        addEvent() {
            const that = this;
            this.obox1 = document.querySelector(".imgbox");
            this.ospan = document.querySelector(".imgbox span");
            this.obox2 = document.querySelector(".imgbbox");
            this.oimg1 = document.querySelector(".imgbox img");
            this.oimg2 = document.querySelector(".imgbbox img");
            this.ob = document.querySelector(".detailsc");
            this.obox1.onmouseover = function () {
                that.block()
            }
            this.obox1.onmousemove = function (eve) {
                const e = eve || window.event;
                that.move(e)
            }
            this.obox1.onmouseout = function () {
                that.none()
            }
        }
        block() {
            this.ospan.style.display = "block";
            this.obox2.style.display = "block";
            //显示后先获取样式
            this.obw1 = this.obox1.offsetWidth;
            this.obh1 = this.obox1.offsetHeight;
            this.obw2 = this.obox2.offsetWidth;
            this.obh2 = this.obox2.offsetHeight;
            this.omw2 = this.oimg2.offsetWidth;
            this.omh2 = this.oimg2.offsetHeight;

            //用比例计算span的大小
            this.ospan.style.width = this.obw1 / (this.omw2 / this.obw2) + "px";
            this.ospan.style.height = this.obh1 / (this.omh2 / this.obh2) + "px";
        }
        move(e) {
            //获取span位置
            let l = e.pageX - this.ob.offsetLeft - this.ospan.offsetWidth / 2;
            let t = e.pageY - this.ob.offsetTop - this.ospan.offsetHeight / 2;

            //设置边界
            if (l < 0) l = 0;
            if (t < 0) t = 0;
            if (l > this.obw1 - this.ospan.offsetWidth) l = this.obw1 - this.ospan.offsetWidth;
            if (t > this.obh1 - this.ospan.offsetHeight) t = this.obh1 - this.ospan.offsetHeight;
            //设置span移动的位置
            this.ospan.style.left = l + "px";
            this.ospan.style.top = t + "px";

            //设置右边的图片位置
            //计算比例
            // 当前移动的距离 / 一共能移动的距离
            let x = l / (this.obox1.offsetWidth - this.ospan.offsetWidth);
            let y = t / (this.obox1.offsetHeight - this.ospan.offsetHeight);
            // 跟随移动
            // 当前移动的距离 = 总距离 * 比例
            this.oimg2.style.left = (this.obw2 - this.omw2) * x + "px";
            this.oimg2.style.top = (this.obh2 - this.omh2) * y + "px";
        }
        none() {
            this.obox2.style.display = "none";
            this.ospan.style.display = "none";
        }
        imgSwitching() {
            const ximg = document.querySelector(".imgbox img");
            const zimg = document.querySelectorAll(".imgtbox img");
            const dimg = document.querySelector(".imgbbox img")
            for (let i = 0; i < zimg.length; i++) {
                zimg[i].index = i
                zimg[i].addEventListener("mouseover", function () {
                    for (let j = 0; j < zimg.length; j++) {
                        zimg[j];
                        zimg[j].className = "";
                        this.className = "imgstyle"
                    }
                    ximg.src = zimg[this.index].src;
                    dimg.src = zimg[this.index].src;
                })
            }
        }
    }
    new Sp
})();